import QtQuick 2.0

Rectangle {
    id: root
    signal clicked()
    property alias text: label.text

    width: 100
    height: 40
    radius: 3

    Label {
        id: label
        anchors.centerIn: parent
    }

    MouseArea {
        id: mouse
        anchors.fill: parent
        hoverEnabled: true
        onClicked: root.clicked()
    }

    states: [
        State {
            name: "normal"
            when: !mouse.containsMouse
            PropertyChanges { target: root; color: "#111"; }
        },
        State {
            name: "hovered"
            when: mouse.containsMouse && !mouse.pressed
            PropertyChanges { target: root; color: "#333"; }
        },
        State {
            name: "pressed"
            when: mouse.pressed
            PropertyChanges { target: root; color: "black"; }
        }
    ]
}
